<template>
	<view class="customer-container">
		<!-- 顶部搜索框 -->
		<view class="search-box">
			<input 
				type="text" 
				v-model="searchText" 
				placeholder="请输入您的问题" 
				@confirm="handleSearch"
			/>
			<text class="search-icon">🔍</text>
		</view>
		
		<!-- 常见问题分类 -->
		<view class="faq-categories">
			<view 
				v-for="(category, index) in categories" 
				:key="index"
				class="category-item"
				@tap="handleCategoryTap(category)"
			>
				<text class="category-icon">{{category.icon}}</text>
				<text class="category-name">{{category.name}}</text>
			</view>
		</view>
		
		<!-- 常见问题列表 -->
		<view class="faq-list">
			<view class="section-title">常见问题</view>
			<view 
				v-for="(item, index) in faqList" 
				:key="index"
				class="faq-item"
				@tap="toggleFaq(index)"
			>
				<view class="faq-question">
					<text>{{item.question}}</text>
					<text class="arrow" :class="{'arrow-up': item.isOpen}">▼</text>
				</view>
				<view class="faq-answer" v-if="item.isOpen">
					<text>{{item.answer}}</text>
				</view>
			</view>
		</view>
		
		<!-- 客服联系方式 -->
		<view class="contact-section">
			<view class="section-title">联系客服</view>
			<view class="contact-methods">
				<view class="contact-item" @tap="handleOnlineService">
					<text class="contact-icon">💬</text>
					<view class="contact-info">
						<text class="contact-title">在线客服</text>
						<text class="contact-desc">工作时间：9:00-22:00</text>
					</view>
					<text class="contact-arrow">></text>
				</view>
				<view class="contact-item" @tap="handlePhoneService">
					<text class="contact-icon">📞</text>
					<view class="contact-info">
						<text class="contact-title">电话客服</text>
						<text class="contact-desc">400-123-4567</text>
					</view>
					<text class="contact-arrow">></text>
				</view>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<bottom-nav :nav-list="bottomNavList" @nav-change="handleNavChange"></bottom-nav>
	</view>
</template>

<script>
	import BottomNav from '@/components/BottomNav/BottomNav.vue'
	
	export default {
		components: {
			BottomNav
		},
		data() {
			return {
				searchText: '',
				categories: [
					{ name: '行程问题', icon: '🚗' },
					{ name: '支付问题', icon: '💰' },
					{ name: '账户安全', icon: '🔒' },
					{ name: '优惠活动', icon: '🎁' }
				],
				faqList: [
					{
						question: '如何修改行程目的地？',
						answer: '在行程开始前，您可以在订单详情页面点击"修改目的地"进行修改。请注意，修改目的地可能会影响行程费用。',
						isOpen: false
					},
					{
						question: '如何申请发票？',
						answer: '您可以在"我的-发票管理"中申请开具发票。支持电子发票和纸质发票两种方式。',
						isOpen: false
					},
					{
						question: '如何取消订单？',
						answer: '在司机接单前，您可以在订单详情页面直接取消订单。如果司机已接单，可能需要支付取消费用。',
						isOpen: false
					},
					{
						question: '如何评价行程？',
						answer: '行程结束后，您可以在订单详情页面点击"评价"按钮，对司机服务进行评价。',
						isOpen: false
					}
				],
				bottomNavList: [
					{ text: '首页', path: '/pages/firstPage/firstPage' },
					{ text: '优惠卷', path: '/pages/couponCenter/couponCenter' },
					{ text: '订单', path: '/pages/userOrder/userOrder' },
					{ text: '我的', path: '/pages/mySelf/mySelf' }
				]
			}
		},
		methods: {
			handleSearch() {
				// 实现搜索功能
				uni.showToast({
					title: '搜索功能开发中',
					icon: 'none'
				})
			},
			handleCategoryTap(category) {
				// 处理分类点击
				uni.showToast({
					title: `查看${category.name}相关问题`,
					icon: 'none'
				})
			},
			toggleFaq(index) {
				this.faqList[index].isOpen = !this.faqList[index].isOpen
			},
			handleOnlineService() {
				// 跳转到在线客服对话页面
				uni.navigateTo({
					url: '/pages/customerService/customerService',
					success: () => {
						console.log('跳转到在线客服页面成功')
					},
					fail: (err) => {
						console.error('跳转到在线客服页面失败', err)
						uni.showToast({
							title: '跳转失败',
							icon: 'none'
						})
					}
				})
			},
			handlePhoneService() {
				// 实现电话客服功能
				uni.makePhoneCall({
					phoneNumber: '4001234567',
					success: () => {
						console.log('拨打电话成功')
					},
					fail: (err) => {
						console.error('拨打电话失败', err)
					}
				})
			},
			handleNavChange(index) {
				const list = this.bottomNavList
				if (!Array.isArray(list)) {
					console.error('bottomNavList 不是数组')
					return
				}
				
				if (index == null || isNaN(index) || index < 0 || index >= list.length) {
					console.error('无效的索引:', index)
					return
				}
				
				const item = list[index]
				if (!item || !item.path) {
					console.error('无效的导航项:', item)
					return
				}
				
				const targetPath = item.path
				if (targetPath !== this.$route?.path) {
					uni.navigateTo({
						url: targetPath,
						success: () => {
							console.log('底部导航跳转成功:', targetPath)
						},
						fail: (err) => {
							console.error('底部导航跳转失败:', targetPath, err)
							uni.showToast({
								title: '跳转失败',
								icon: 'none'
							})
						}
					})
				}
			}
		}
	}
</script>

<style>
.customer-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
	padding-bottom: 120rpx;
}

.search-box {
	position: relative;
	margin-bottom: 30rpx;
}

.search-box input {
	width: 100%;
	height: 80rpx;
	background-color: #fff;
	border-radius: 40rpx;
	padding: 0 80rpx 0 30rpx;
	font-size: 28rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.search-icon {
	position: absolute;
	right: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	font-size: 32rpx;
	color: #999;
}

.faq-categories {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
}

.category-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.category-icon {
	font-size: 48rpx;
	margin-bottom: 10rpx;
}

.category-name {
	font-size: 24rpx;
	color: #333;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.faq-list {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
}

.faq-item {
	border-bottom: 1rpx solid #eee;
	padding: 20rpx 0;
}

.faq-item:last-child {
	border-bottom: none;
}

.faq-question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28rpx;
	color: #333;
}

.arrow {
	font-size: 24rpx;
	color: #999;
	transition: transform 0.3s;
}

.arrow-up {
	transform: rotate(180deg);
}

.faq-answer {
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}

.contact-section {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
}

.contact-methods {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.contact-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.contact-item:last-child {
	border-bottom: none;
}

.contact-icon {
	font-size: 40rpx;
	margin-right: 20rpx;
}

.contact-info {
	flex: 1;
}

.contact-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 6rpx;
}

.contact-desc {
	font-size: 24rpx;
	color: #999;
}

.contact-arrow {
	font-size: 28rpx;
	color: #999;
}

/* 添加点击效果 */
.category-item:active,
.faq-item:active,
.contact-item:active {
	opacity: 0.7;
}
</style>
